<template>
    <div class="wrap" id="wrap">
        <zpagenav :page="page" :page-size="pageSize" :total="total"
                  :max-page="maxPage"  v-on:pagehandler="pageHandler">
        </zpagenav>
    </div>
</template>

<script>
    import nav from '../contents/zpageNav'
    import { mapActions, mapState } from "vuex";

    export default {
        components:{
            'zpagenav':nav
        },
        data(){
            return{
                page: 1,  //显示的是哪一页
                pageSize: 10, //每一页显示的数据条数
                maxPage:9  //最大页数
            }
        },
        methods: {
            ...mapActions(["getClients"]),
            //pagehandler方法 跳转到page页
            pageHandler: function (page) {
                this.getClients(page);
                this.page = page;
            }
        },
        computed:{
            ...mapState({
                total:state=>state.clientCount,
            })
        },
        created:function(){
            //created  表示页面加载完毕，立即执行
            this.pageHandler(1);
        }
    }
</script>